<template>
  <div :style="[column.color ? {color:column.color}:null]" class="btn-wrapper"
       :class="{'btn-wrapper--clickable':column.clickable}" @click="handleClickCol"
  >
    <div v-if="column.type === ColumnType.IMAGE" style="height: 50px" class="btn-wrapper">
      <!--      <el-image v-if="imgList.length === 1" :style="{borderRadius:column.borderRadius||'0px'}" fit="cover"-->
      <!--                :src="imgList[0]"-->
      <!--                class="column-image"-->
      <!--                @click.stop="handlePreviewImgList"-->
      <!--      />-->
      <el-image v-if="imgList.length === 1" :style="{borderRadius:column.borderRadius||'0px'}" fit="cover"
                :src="imgList[0] | imgFilter"
                class="column-image"
                :preview-src-list="imgList"
      />
      <div v-else-if="imgList.length > 1" class="flex">
        <!--        <el-button v-if="text" size="mini" type="text" @click.stop="handlePreviewImgList">-->
        <!--          查看图片-->
        <!--        </el-button>-->
        <el-image :style="{borderRadius:column.borderRadius||'0px'}" fit="cover"
                  :src="im | imgFilter"
                  v-for="(im,idx) in imgList"
                  :key="idx"
                  class="column-image--2"
                  :preview-src-list="imgList"
        />
      </div>
      <div v-else class="column-image"></div>
    </div>
    <div v-else-if="column.type === ColumnType.VIDEO">
      <el-button v-if="text" size="mini" type="text" @click.stop="handleShowPlayVideo">
        播放视频
      </el-button>
    </div>
    <div v-else-if="column.type === ColumnType.QRCODE">
      <canvas ref="canvas" class="my-canvas"></canvas>
    </div>
    <div v-else-if="column.type === ColumnType.LEFT_TIME_COUNT">
      <left-time-counter :value="text"/>
    </div>
    <div v-else-if="column.type === ColumnType.MONEY">
      ￥ {{ text }}
    </div>
    <div v-else-if="column.type === ColumnType.RICH_TEXTAREA" v-html="text" class="editor">

    </div>
    <div v-else-if="showTag">
      <el-tag
        v-if="text"
        size="mini"
        :type="tagType"
      >{{
          text
        }}
      </el-tag>
    </div>
    <div v-else-if="column.viewDetail">
      <el-button size="mini" v-if="text" @click="handleShowDetail">查看详情</el-button>
    </div>
    <div v-else-if="column.viewAsLink">
      <el-link :href="finalLink" v-if="finalLink" type="primary" target="_blank" style="transform: scale(0.9)">链接跳转
      </el-link>
      <el-button style="transform: scale(0.9)" v-clipboard:copy="finalLink" v-clipboard:success="handleCopySuccess"
                 size="mini" v-if="finalLink"
      >复制
      </el-button>
      <el-popover
        placement="right"
        v-if="finalLink && column.qrcode"
        width="175"
        trigger="hover"
        @show="generateQRCode"
      >
        <canvas ref="canvas" style="width: 150px;height: 150px"></canvas>
        <!--        <i slot="reference" class="el-icon-mobile-phone" @click="handleShowQrcode"></i>-->
        <i slot="reference" class="el-icon-mobile-phone"></i>
      </el-popover>


    </div>
    <div v-else-if="column.oneLine">
      <el-tooltip effect="dark" placement="left">
        <div slot="content" class="tooltip-content">
          {{ text }}
        </div>
        <div class="one-line">{{ text }}</div>
      </el-tooltip>
    </div>
    <span v-else>{{ text }}</span>
    <div v-if="column.btnList">
      <el-button v-for="c in column.btnList" v-perm="c.name" v-if="!c.showFilter || c.showFilter({row:data})"
                 :key="c.name" @click="handleClick(c)" size="mini"
                 type="text"
                 :icon="c.icon || 'el-icon-edit'"
      >
        {{ c.label }}
      </el-button>
    </div>
  </div>
</template>

<script>

import ColumnType from '@/framework/constant/ColumnType'
import ColumnUtil from '@/framework/components/table/ColumnUtil'
import TypeDiagnose from '@/framework/infra/type/TypeDiagnose'
import ObjectUtil from '@/framework/infra/object/ObjectUtil'
import LeftTimeCounter from '@/framework/components/LeftTimeCounter'
import NameUtil from '@/framework/infra/name/NameUtil'
import QRCode from 'qrcode'

export default {
  name: 'ColumnRender',
  components: { LeftTimeCounter },
  computed: {
    showTag() {
      const column = this.column
      return !column.displayProp
        && (column.type === ColumnType.SELECT || column.type === ColumnType.RADIO)
        && column.tagMode !== false
        && (typeof column.options !== 'function' || TypeDiagnose.isEnum(column.options))
        && !(column.options instanceof Promise)
    },
    value() {
      return ObjectUtil.getPropValue(this.data, this.column.displayProp || this.column.prop)
    },
    imgList() {
      let rt = []
      if (this.text) {
        if (Array.isArray(this.text)) {
          rt = this.text
        } else {
          rt = this.text.split(',')
        }
      }
      return rt.map(el => {
        el = el.replace('https://tm-shop-1315218174.cos.ap-guangzhou.myqcloud.com', '')
        if (el.startsWith('/images')) {
          // && !el.includes('2023_07_26')
          // 2023_07_26/1690349899567YCBgb9.png
          // el = 'https://tm-shop-1315218174.cos.ap-guangzhou.myqcloud.com/oss' + el
          el = '/oss' + el
        }
        return el
      })
    },
    finalLink() {
      // if (this.text && this.text.match) {
      //   const result = this.text.match(/https?:\/\/\S*/i)
      //   if (result) {
      //     return result[0]
      //   }
      // }
      return this.text 
    }
  },
  filters: {
    imgFilter(v) {
      return v + '?imageMogr2/thumbnail/50x'
    }
  },
  data() {
    return {
      ColumnType,
      text: '',
      tagType: ''
    }
  },
  watch: {
    async value() {
      this.text = await this.getText()
      this.tagType = await this.getTagType()
    }
    // text() {
    //   if (this.text) {
    //     this.generateQRCode()
    //   }
    // }
  },
  async created() {
    this.text = await this.getText()
    this.tagType = await this.getTagType()
  },
  methods: {
    handleShowQrcode() {
      this.$emit('qrcode', this.text)
    },
    generateQRCode() {
      // if (this.column.type !== ColumnType.QRCODE) {
      //   return
      // }
      // debugger
      this.$nextTick(() => {
        const canvas = this.$refs.canvas
        QRCode.toCanvas(canvas, this.text, { margin: 0, width: 150, height: 150 })
      })
    },
    handleCopySuccess() {
      this.$message.success('复制成功')
    },
    handleClickCol() {
      if (!this.column.clickable) {
        return
      }
      this.$emit('click', {
        funcType: 'click' + NameUtil.upperCaseFirstLetter(this.column.prop)
      })
    },
    handleClick(btn) {
      this.$emit('click', btn)
    },
    handleShowDetail() {
      this.$emit('previewDetail', this.text)
    },
    handlePreviewImgList() {
      this.$emit('previewImage', this.imgList)
    },
    handleShowPlayVideo() {
      this.$emit('play', this.text)
    },
    async getText() {
      return ColumnUtil.getText(this.column, this.value)
    },
    async findOptionItem(value) {
      return ColumnUtil.findOptionItem(this.column, value)
    },
    async getTagType() {
      const value = this.value
      const item = await this.findOptionItem(value)
      let type = item?.type
      if (!type) {
        if (value === 0) {
          type = 'danger'
        } else if (value === 1) {
          type = 'success'
        }
      }
      return type || 'primary'
    }
  },
  props: {
    column: {
      type: Object,
      default: null
    },
    data: {
      type: Object,
      default: null
    }
  }
}
</script>
<style scoped lang="scss">
.column-image {
  width: 50px;
  height: 50px;

  + .column-image {
    margin-left: 10px;
  }
}

.column-image--2 {
  width: 30px;
  height: 30px;

  + .column-image--2 {
    margin-left: 10px;
  }
}

.one-line {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

.tooltip-content {
  max-width: 400px;
  line-height: 2;
}

.btn-wrapper {
  display: flex;
  //align-items: center;
  justify-content: center;
  flex-direction: column;

  &--clickable {
    color: #4b97de;
    cursor: pointer;
  }
}

.text {
  white-space: pre-line;
}


.editor {
  line-height: 1.4;

  ::v-deep img {
    max-width: 100%;
  }

}

.my-canvas {
  width: 60px;
  height: 60px;
}

.el-icon-mobile-phone {
  margin-left: 2px;
  font-size: 16px;
}
</style>

